<template>
  <div class="icons">
    <swiper :options="swiperOption" >
      <swiper-slide v-for="(icons, index) in iconList" :key="index">
        <div class="icon-item" v-for="item of icons" :key="item.id">
          <div class="icon-image">
            <img class="icon-image-content" :src="item.uri">
          </div>
          <p class="icon-title">{{ item.title }}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: "HomeIcons",
    created: function() {
      this.initIconList();
    },
    data() {
      return {
        swiperOption: {
          loop: true,
        },
        iconList: [],
        iconTitles: ["热门景点", "泡温泉", "分界洲岛", "一日游", "必游榜单", "大小洞天", "自然风光", "全部"]
      }
    },
    methods: {
      initIconList() {
        let total = 12;
        let base = 8;
        for (let i = 1; i <= total;i++) {
          if (i % 8 === 1) {
            this.iconList.push([]);
          }
          this.iconList[~~((i - 1) / base)].push({
            id: 'S0' + i,
            uri: require("@/assets/images/icon_" + (i % 8 + 1) + ".png"),
            title: this.iconTitles[(i - 1) % 8]
          });
        }

        console.log(this.iconList);
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import "~styles/mixins.scss";
  .icons >>> .swiper-container {
    overflow: hidden;
    height: 0;
    padding-bottom: 50%;
  }
  .icons {
    height: 0;
    /*overflow: hidden;*/
    /*background-color: #eeeeee;*/
    margin-top: .2rem;
    padding-bottom: 50%;
    .icon-item {
      width: 25%;
      height: 0;
      padding-bottom: 25%;
      overflow: hidden;
      float: left;
      position: relative;
      .icon-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: .44rem;
        box-sizing: border-box;
        padding: .1rem;
        .icon-image-content {
          display: block;
          margin: 0 auto;
          /* 高度根据父元素高度自适应 */
          height: 100%;
        }
      }
      .icon-title {
        /* 绝对定位，如果指定了各个方向的的偏移值，那么元素会被拉伸 */
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: .44rem;
        text-align: center;
        font-size: .26rem;
        @include ellipsis
      }
    }
  }
</style>